<template>
  <div>
    <div class="form-wrap">
      <div class="info-field">
        <span class="label">状态:</span>
        <span class="value" :class="apply.color">{{apply.state}}</span>
      </div>
      <div class="info-field">
        <span class="label">微信APPID:</span>
        <span v-if="locked" class="value gray">{{appId}}</span>
        <input
          v-else
          v-model="form2.wechatAppId"
          class="input-block"
          type="text"
          placeholder="填写微信APPID"
          placeholder-class="placeholder-part"
        >
      </div>
      <div class="info-field">
        <span class="label">微信私钥:</span>
        <span v-if="locked" class="value gray">{{secret}}</span>
        <input
          v-else
          v-model="form2.wechatSecret"
          class="input-block"
          type="text"
          placeholder="填写微信私钥"
          placeholder-class="placeholder-part"
        >
      </div>

      <button
        v-if="locked"
        key="1"
        class="btn-round-blue"
        :disabled="apply.disabled"
        @click="locked=false"
      >申请变更</button>
      <button
        v-else
        key="2"
        class="btn-round-blue"
        @click="handleSubmitApply"
      >提交</button>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { FIND_SHOP_APPLY_INFO, SEND_SHOP_APPLY } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      applyState: {
        '-1': '尚未申请',
        '0': '审核中',
        '1': '审核通过',
        '2': '审核未通过'
      },
      form: { state: '-1' },
      form2: {},
      locked: true
    }
  },
  computed: {
    apply () {
      let color = {
        '-1': 'gray',
        '0': 'blue',
        '1': 'green',
        '2': 'red'
      }

      return {
        disabled: this.form.state === '0',
        state: this.applyState[this.form.state],
        color: color[this.form.state]
      }
    },
    appId () {
      return this.hideMsg(this.form.wechatAppId)
    },
    secret () {
      return this.hideMsg(this.form.wechatSecret)
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.locked = true
    this.findApplyInfo()
  },
  methods: {
    handleSubmitApply () {
      if (!this.form2.wechatAppId) {
        this.$toast('请填写微信APPID')
      } else if (!this.form2.wechatSecret) {
        this.$toast('请填写微信私钥')
      } else {
        this.submitApply()
      }
    },
    handleCancel () {
      this.locked = true
      this.form2 = {}
    },

    findApplyInfo () {
      const vm = this

      FIND_SHOP_APPLY_INFO(vm.$store.state.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            let result = r.data.data
            if (!result) {
              // 尚未申请
              vm.form.state = '-1'
            } else {
              vm.form = result
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    hideMsg (msg) {
      if (msg) {
        // return msg.match(/^\S{4}/)[0] + '*******' + msg.match(/\S{4}$/)[0]
        if (msg.length < 8) {
          return msg
        } else {
          return msg.match(/^\S{4}/)[0] + '*******' + msg.match(/\S{4}$/)[0]
        }
      } else {
        return ''
      }
    },
    submitApply () {
      const vm = this

      let params = {
        shopId: vm.$store.state.account.shopId,
        ...vm.form2
      }

      SEND_SHOP_APPLY(params)
        .then(r => {
          if (r.data.code === '0') {
            // vm.$toast('操作成功')
            vm.$alert('操作成功', '').then(() => {
              vm.handleCancel()
              vm.findApplyInfo()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .info-field {
    > .value {
      flex-grow: 1;
      &.gray {
        color: $gray;
      }
      &.blue {
        color: $blue;
      }
      &.green {
        color: $green;
      }
      &.red {
        color: $red;
      }
    }
  }
  > .btn-round-blue {
    margin-top: 50px;
  }
}
</style>
